<template>
    <div class="menu-page">
        <div class="table-top">
            <div></div>
            <div>客户名称</div>
            <div>额度</div>
            <div>展期</div>
            <div>金额</div>
        </div>
        <div class="table-wrapper">
            <van-checkbox-group v-model="result" checked-color="#50b1c1">
                <div class="table-row" v-for="item in list" :key="item.id">
                    <van-checkbox :name="item.id">
                        <div class="row-box">
                            <div>{{ $route.query.title }}</div>
                            <div>￥{{ item.amount }}</div>
                            <div>{{ item.period }}</div>
                            <div class="number-box">￥<input :readonly="item.is_period" @click.stop="" type="number" v-model="item.newAmount" /></div>
                        </div>
                    </van-checkbox>
                </div>
            </van-checkbox-group>
            <div class="table-row-tool">
                <div @click="$router.go(-1)">取消</div>
                <div @click="handleSubmit">确定</div>
            </div>
        </div>
    </div>
</template>
<script>
import { Toast } from 'vant'
export default {
    name: 'MenuPage',
    data() {
        return {
            list: [],
            result: []
        }
    },
    mounted() {
        this.onLoad()
    },
    methods: {
        onLoad() {
            this.list = []
            this.getList()
        },
        getList() {
            this.$api.check_bill_list({
                bill_id: this.$route.query.id
            }).then(res => {
                res.data.forEach(item => {
                    let newAmount = 0
                    if (item.is_period && item.period) {
                        newAmount = (item.amount / item.period).toFixed(2)
                    } else {
                        item.is_period = false
                        newAmount = item.rest_amount
                    }
                    this.list.push(Object.assign({}, item, { newAmount }))
                })

            })
        },
        handleSubmit() {
            let items = []
            if (this.result.length == 0) {
                Toast('请选择需要核销的客户')
                return
            }
            let isSubmit = true
            try {
                this.result.forEach(item => {
                    const objFind = this.list.find(item2 => item2.id == item)
                    console.log(objFind)
                    if (!objFind.newAmount) {
                        Toast('请先填写所选客户的金额')
                        isSubmit = false
                        return
                    }
                    if (objFind.newAmount*1 > objFind.rest_amount*1) {
                        console.log(objFind.newAmount*1, objFind.rest_amount*1)
                        Toast('填写金额大于剩余金额')
                        isSubmit = false
                        return
                    }
                    items.push({
                        bill_item_id: item,
                        amount: objFind.newAmount * 1
                    })
                  
                })
            } catch (error) {
                return
            }
            if(!isSubmit){
                return
            }
            this.$api.check_bill({
                bill_id: this.$route.query.id,
                items: items
            }).then(res => {
                Toast(res.msg)
                this.onLoad()
            })
        }
    }
}
</script>

<style scoped lang="scss">
.menu-page {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    background-color: #fff;


    .top-group {
        padding: 0 .4rem;
        background-color: #50b1c1;
        height: 50px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 16px;
        color: #fff;
        position: sticky;
        top: 0;
        width: 100%;
        z-index: 1;

        .top-select {
            display: flex;
            align-items: center;

            .van-icon {
                margin-left: 2px;
                font-size: 14px;
            }
        }
    }

    .table-top {
        padding: 0 .4rem;
        background-color: #f6f6f6;
        height: 50px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 14px;
        color: #000;
        position: sticky;
        top: 0px;
        width: 100%;
        z-index: 1;
        border-bottom: 1px solid #e0e0e0;

        div {
            display: flex;
            align-items: center;

            &:nth-child(1) {
                width: 28px;
            }

            &:nth-child(2) {
                width: 3rem;
            }

            &:nth-child(3) {
                width: 2.35rem;
            }

            &:nth-child(4) {
                width: 1.2rem;
            }

            &:nth-child(5) {
                flex: 1;
            }

            .icon {
                width: .35rem;
                margin-left: 6px;
            }
        }
    }

    .table-wrapper {
        padding-bottom: 60px;

        .table-row {
            margin: 0 .4rem;
            min-height: 50px;
            // display: flex;
            // justify-content: space-around;
            // align-items: center;
            font-size: 12px;
            color: #000;
            // position: sticky;
            // top: 50px;
            width: calc(100% - .8rem);
            border-bottom: 1px solid #e0e0e0;

            .row-box {
                display: flex;
                justify-content: space-around;
                min-height: 50px;

                div {
                    word-break: break-all;
                    display: flex;
                    align-items: center;

                    &:nth-child(1) {
                        width: 3rem;
                        padding-right: .13rem;
                    }

                    &:nth-child(2) {
                        width: 2.35rem;
                        padding-right: .13rem;
                    }

                    &:nth-child(3) {
                        width: 1.2rem;
                        padding-right: .13rem;
                        padding-left: 0.1rem;
                    }

                    &:nth-child(4) {
                        flex: 1;
                    }


                }
            }
        }

        .table-row-tool {
            padding: 0 .4rem;
            min-height: 50px;
            background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-around;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            border-top: 1px solid #e0e0e0;
            z-index: 1;

            div {
                width: 100px;
                height: 36px;
                text-align: center;
                line-height: 36px;
                background-color: #50b1c1;
                color: #fff;
                border-radius: 4px;

                &:nth-child(1) {
                    color: #50b1c1;
                    background-color: #fff;
                    border: 1px solid #50b1c1;
                }
            }
        }
    }
}
</style>